<template>
	<view class="grid-container">
		<view class="grid-item" @click="handleBrandStory">
			<image src="/static/images/enkilife.png" mode="aspectFit" class="grid-icon"></image>
			<text class="grid-text">品牌故事</text>
		</view>
		<view class="grid-item" @click="handleAllProducts">
			<image src="/static/images/products.png" mode="aspectFit" class="grid-icon"></image>
			<text class="grid-text">全部产品</text>
		</view>
		<view class="grid-item" @click="handlePromotion">
			<image src="/static/images/promotion.png" mode="aspectFit" class="grid-icon"></image>
			<text class="grid-text">促销活动</text>
		</view>
		<view class="grid-item" @click="handleContactUs">
			<image src="/static/images/contact.png" mode="aspectFit" class="grid-icon"></image>
			<text class="grid-text">联系我们</text>
		</view>
	</view>
</template>

<script>
export default {
	name: 'HomeGrid',
	methods: {
		handleBrandStory() {
			uni.navigateTo({
				url: '/pages/brand/story'
			});
		},
		handleAllProducts() {
			uni.navigateTo({
				url: '/pages/products/list'
			});
		},
		handlePromotion() {
			uni.navigateTo({
				url: '/pages/promotion/list'
			});
		},
		handleContactUs() {
			uni.navigateTo({
				url: '/pages/contact/index'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.grid-container {
	display: flex;
	flex-wrap: wrap;
	padding: 20rpx;
	background-color: #f5f5f5;
	
	.grid-item {
		width: calc(50% - 20rpx);
		height: 200rpx;
		margin: 10rpx;
		background-color: #fff;
		border-radius: 12rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		
		&:nth-child(1) {
			background-color: #FFE4E4; /* 浅红色背景 */
			.grid-text {
				color: #FF4D4D; /* 红色文字 */
			}
		}
		
		&:nth-child(2) {
			background-color: #E4FFE4; /* 浅绿色背景 */
			.grid-text {
				color: #4CAF50; /* 绿色文字 */
			}
		}
		
		&:nth-child(3) {
			background-color: #E4F1FF; /* 浅蓝色背景 */
			.grid-text {
				color: #2196F3; /* 蓝色文字 */
			}
		}
		
		&:nth-child(4) {
			background-color: #FFF3E0; /* 浅橙色背景 */
			.grid-text {
				color: #FF9800; /* 橙色文字 */
			}
		}
		
		.grid-icon {
			width: 80rpx;
			height: 80rpx;
			margin-bottom: 16rpx;
		}
		
		.grid-text {
			font-size: 28rpx;
			font-weight: 500;
		}
	}
}
</style> 